<style lang="scss">
.el-row {
  margin-bottom: 20px;
}

.grid-content {
  border-bottom: 1px solid #dcdfe6;
  min-height: 36px;
}

.el-input__wrapper {
  margin-left: 12px;
}

.el-pagination--small {
  margin: 0 auto;
}
</style>

<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div class="grid-content ep-bg-purple-dark">
          <el-button type="primary" @click="sectionForm.showAndInte()">新增</el-button>
          <el-button type="primary">上传</el-button>
          <el-button type="primary">下载</el-button>
          <el-input type="input" v-model="input" style="width: 240px" placeholder="搜索词"></el-input>
          <el-button type="primary" @click="inteTable()">搜索</el-button>
        </div>
      </el-col>
    </el-row>
    <el-table :data="tableData" border stripe="true" style="width: 100%;">
      <el-table-column fixed prop="index" label="序号" width="60" align="center" />
      <el-table-column prop="sno" label="学号" min-width="140" align="center" />
      <el-table-column prop="sname" label="姓名" min-width="120" />
      <el-table-column prop="ssex" label="性别" width="60" align="center" />
      <el-table-column prop="birthday" label="生日" min-width="140" align="center" />
      <el-table-column prop="en_time" label="入学时间" min-width="140" align="center" />
      <el-table-column prop="specialty" label="专业" min-width="120" />
      <el-table-column prop="grade" label="年级" width="140" />
      <el-table-column fixed="right" label="操作" min-width="150" align="center">
        <template #default="scope">
          <el-button size="small" @click="sectionForm.showAndInte(scope.row)">设置</el-button>
          <el-button size="small" type="danger" @click="Delete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination :total="total" v-model:currentPage="currentPage" v-model:page-size="pageSize"
      :pageSizes="[12, 15, 20, 30]" layout=" prev, pager, next, sizes, jumper" @update:currentPage="handleSizeChange"
      @update:pageSize="handleCurrentChange" />
    <StudentForm ref="sectionForm" @submit="updateTableData" />
  </div>
</template>

<script lang="js" setup name="StudentView">
import { onMounted, ref } from 'vue'
import request from '@/utils/request'
import pagination from '@/components/Pagination/index.vue'
import StudentForm from './StudentForm.vue'
const sectionForm = ref();
const input = ref('')
const tableData = ref([]);

const total = ref(0);
const currentPage = ref(1);
const pageSize = ref(12);
const handleSizeChange = (newPage) => {
  currentPage.value = newPage;
  inteTable();
}
const handleCurrentChange = (newSize) => {
  pageSize.value = newSize;
  inteTable();
}

const inteTable = () => {
  request({
    url: 'api/Student?' + 'keyword=' + input.value + '&' + 'pageIndex=' + currentPage.value + '&' + 'pageSize=' + pageSize.value,
    method: 'get'
  }).then(res => {
    if (res.data != null) {
      request({
        url: 'api/Student/StudentsCount?' + 'keyword=' + input.value,
        method: 'get'
      }).then(res => {
        total.value = res.data;
      })
      for (let i = 0; i < res.data.length; i++) {
        res.data[i].index = pageSize.value * (currentPage.value - 1) + i + 1;
        if (res.data[i].birthday) {
          res.data[i].birthday = res.data[i].birthday.toString().substring(0, 10);
        }
        if (res.data[i].en_time) {
          res.data[i].en_time = res.data[i].en_time.toString().substring(0, 10);
        }
      }
    } else {
      total.value = 1;
    }
    tableData.value = res.data;
  })
}

const Delete = (row) => {
  request({
    url: 'api/Student?' + 'sno=' + row.sno,
    method: 'delete'
  }).then(res => {
    if (res.status == 200) {
      ElMessage({
        message: '删除成功！',
        type: 'warning',
      })
      inteTable();
    }
  })
}

const updateTableData = () => {
  inteTable();
}

onMounted(() => {
  inteTable();
})
</script>
